@import 'jetpack-connect/colors.scss';
@import 'woocommerce/components/text-control/style.scss';
@import '~@automattic/onboarding/styles/mixins';
@import '~@automattic/typography/styles/fonts';
@import '~@wordpress/base-styles/breakpoints';
@import '~@wordpress/base-styles/mixins';

$image-height: 47px;

.layout.is-section-login {
	padding-bottom: $image-height;
	position: relative;
	min-height: calc( 100% - #{$image-height} );

	.layout__content {
		position: static;
	}

	&.has-no-masterbar {
		.layout__content {
			// Adjust the padding as we no longer
			// show the masterbar.
			padding-top: 48px;
		}

		// Hide the masterbar for real
		.masterbar {
			display: none;
		}
	}
}

.wp-login__main.main {
	max-width: 400px;
}

.wp-login__header {
	color: var( --color-neutral-40 );
	font-size: $font-body;
	margin-bottom: 16px;
	text-align: center;

	body.is-section-signup & {
		color: var( --color-text-inverted );
	}
}

.wp-login__links,
.wp-login__footer {
	a,
	a:visited,
	button {
		color: var( --color-neutral-50 );

		body.is-section-signup & {
			color: var( --color-text-inverted );
		}
	}
}

.wp-login__links {
	a,
	button {
		border-bottom: 1px solid var( --color-neutral-10 );
		box-sizing: border-box;
		cursor: pointer;
		display: block;
		font-size: $font-body-small;
		font-weight: 600;
		line-height: 4em;
		padding: 0 24px;
		text-align: center;
		width: 100%;

		&:hover,
		&:active {
			color: var( --color-accent );
		}

		&:last-child {
			border-bottom: none;
		}
	}

	.gridicon {
		margin-right: 3px;
		vertical-align: text-bottom;

		&.gridicons-external {
			top: 0;
			margin-right: 0;
			margin-left: 3px;
		}
	}
}

.wp-login__footer {
	position: absolute;
	bottom: 0;
	left: 0;
	height: $image-height;
	line-height: $image-height;
	width: 100%;
}

.wp-login__footer--jetpack {
	background: var( --color-surface );
	border-top: solid 1px var( --color-neutral-5 );
	text-align: center;

	img {
		display: block;
		margin: 0 auto;
	}
}

.wp-login__footer--oauth {
	display: flex;
	justify-content: center;

	a {
		padding: 0 1em;
	}
}

.card.wp-login__private-site {
	margin-bottom: 0;
}

.wp-login__private-site-image {
	height: 92px;
	margin-bottom: 10px;
	text-align: center;
}

.wp-login__private-site-header {
	font-weight: 600;
	margin-bottom: 10px;
	text-align: center;
}

.wp-login__private-site-button {
	width: 100%;
}

.wp-login__site-return-link {
	overflow: hidden;
	position: relative;
	white-space: nowrap;

	&::after {
		@include long-content-fade( $color: var( --color-neutral-0-rgb ) );
	}
}

.layout.is-jetpack-login:not( .is-jetpack-woocommerce-flow ):not( .is-wccom-oauth-flow ) {
	@include jetpack-connect-colors();
}

.layout.is-jetpack-woocommerce-flow,
.layout.is-wccom-oauth-flow,
.layout.is-jetpack-woo-dna-flow {
	@include woocommerce-colors();
}

.layout.is-jetpack-login {
	background-color: var( --color-jetpack-onboarding-background );

	.login__form-header,
	.magic-login__form-header {
		color: var( --color-jetpack-onboarding-text );
	}

	.jetpack-logo__text {
		fill: var( --color-jetpack-onboarding-text );
	}

	.login__form input:focus,
	.logged-out-form input:focus {
		border-color: var( --color-accent );
		box-shadow: 0 0 0 2px var( --color-accent-light );
	}

	.login__form-terms a,
	.login__social-tos a,
	.form-input-validation a,
	.login__form-change-username {
		color: var( --color-accent-dark );

		&:hover,
		&:focus {
			color: var( --color-accent );
		}
	}

	.wp-login__links a,
	.wp-login__links button,
	.logged-out-form__links a,
	.logged-out-form__link-item,
	.translator-invite__content a,
	.magic-login__footer a {
		color: var( --color-neutral-20 );
		border-bottom-color: var( --color-neutral-70 );

		&:hover,
		&:focus {
			color: var( --color-primary-20 );
		}
	}

	.translator-invite__content a {
		border: none;
	}

	.translator-invite__content {
		color: var( --color-neutral-50 );
	}

	.wp-login__site-return-link::after {
		background: linear-gradient(
			to right,
			rgba( var( --color-jetpack-onboarding-background-rgb ), 0 ),
			var( --color-jetpack-onboarding-background ) 90%
		);
	}
}

.layout.is-jetpack-woocommerce-flow,
.layout.is-wccom-oauth-flow {
	background-color: var( --color-woocommerce-onboarding-background );

	.wp-login__links {
		margin-top: 1em;
	}

	.wp-login__links a {
		border-bottom: none;
		line-height: 3.4em;
		color: var( --color-neutral-60 );
		font-size: $font-body-small;
		text-decoration: underline;
		font-weight: normal;
	}

	.login__form-header {
		color: var( --color-neutral-80 );
	}

	.wp-login__main.main {
		max-width: 476px;
	}

	.login__form {
		@include elevation( 2dp );
		padding-bottom: 0;
		padding-top: 8px;
	}

	.login__form input:focus,
	.logged-out-form input:focus {
		border: 0;
		box-shadow: none;
	}

	.login__form-change-username {
		color: var( --color-neutral-60 );
	}

	.login__form-terms,
	.login__form-terms a,
	.login__form-terms a:hover {
		text-align: left;
		color: var( --color-neutral-60 );
		font-size: $font-body-extra-small;
	}

	.login__social {
		box-shadow: none;
		padding-top: 0;
		margin-right: auto;
		margin-left: auto;
		width: 300px;
	}

	.login__social-buttons {
		.social-buttons__button {
			border: 1px solid var( --studio-pink-50 );
			color: var( --studio-pink-50 );
			box-shadow: none;
		}
	}

	.login__social-tos a {
		color: var( --studio-gray-60 );
	}

	.wp-login__site-return-link::after {
		background: none;
	}

	.woocommerce-muriel-text-control,
	.muriel-input-text {
		border-color: var( --color-neutral-20 );

		.text-control__label,
		.components-base-control__label {
			color: var( --color-neutral-50 );
			font-size: $font-body-extra-small;
			font-weight: normal;
		}

		&.active {
			box-shadow: 0 0 0 2px var( --studio-woocommerce-purple-60 );
			border-color: transparent;
		}
	}

	.login__form-footer {
		text-align: center;
		.button {
			max-width: 310px;
			height: 48px;

			&.is-primary {
				border: 0;
			}
		}
	}
}

.layout.is-gutenboarding-login {
	background-color: #fff;

	.layout__primary {
		padding-top: 10%;
	}

	.login__form-header {
		@include onboarding-heading-text-mobile;
		margin-bottom: 0;

		@include break-mobile {
			@include onboarding-heading-text;
		}
	}

	.wp-login__container .card {
		box-shadow: none;
	}

	.login .button.is-primary {
		// Match primary button color in Gutenboarding and
		// change border color to remove 3D effect
		background-color: #007cba;
		border-color: #007cba;
		color: #fff;
		width: auto;
		min-width: 100%;
		text-align: center;
		font-size: $font-body-small;
		line-height: 24px;
		height: 42px;
		display: block;
		margin: 13px auto;
		float: none;
		font-weight: 600;
		letter-spacing: 0;
		transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
		border-radius: 2px;
		box-shadow: none;

		&:hover,
		&:active {
			background: #72aee6;
			border-color: #72aee6;
			color: #fff;
			outline-color: transparent;
			box-shadow: none;
		}

		@include break-mobile {
			min-width: 170px;
		}
	}

	.two-factor-authentication__verification-code-form > p,
	.login__form .login__form-userdata label,
	.login__form-terms,
	.login__social-tos {
		color: var( --studio-gray-40 );
	}

	.login__form-terms a,
	.login__social-tos a {
		color: var( --studio-gray-80 );
	}

	.two-factor-authentication__verification-code-form input,
	.login__form input {
		padding: 18px 14px;
		font-size: $font-body-small;
	}

	.wp-login__main {
		max-width: 540px;

		form {
			max-width: 440px;
			margin: 0 auto;
		}
	}

	.form-password-input .form-password-input__toggle-visibility {
		top: 17px;
	}

	.wp-login__links a:hover,
	.wp-login__links a:active,
	.wp-login__links button:hover,
	.wp-login__links button:active {
		color: #00a0d2;
	}
}
